
.playground-wrap {
  width: 100vw;
  height: calc(100vh - 76px);
  position: fixed;
  left: 0px;
  top: 76px;
  z-index: 1;
  background-color: rgb(255, 255, 255);
}

/** 美化滚动条 [Start] */
.playground-wrap .prism-code:-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.playground-wrap .prism-code::-webkit-scrollbar-track {
  width: 5px !important;
  background: hsla(0, 0%, 100%, 0.1) !important;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.playground-wrap .prism-code::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.2) !important;
  background-color: #c1c1c1 !important;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.playground-wrap .prism-code::-webkit-scrollbar-thumb:hover {
  background-color: #443082 !important;
}

.playground-wrap .prism-code {
  height: calc(100vh - 158px);
}

.playground-wrap .liveErr {
  color: red;
}

.playground-wrap .liveConsoleWrap {
  position: relative;
  height: 50%;
}

.playground-wrap .liveConsole {
  background-color: #242424;
  height: 100%;
  overflow-y: auto;
}

.playground-wrap .menuWrap {
  display: block;
  height: 28px;
  color: #4f5866;
  font-size: 16px;
  line-height: 28px;
  text-decoration: none;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playground-wrap .topBar {
  width: 200%;
  height: 28px;
  z-index: 200;
  border: 1px solid #443782;
  box-sizing: border-box;
  position: relative;
  display: flex;
}

.playground-wrap .topBar>.samples  {
  display: flex;
  flex-grow: 1;
}


.playground-wrap .topBarItem {
  display: inline-block;
  height: 22px;
  color: #fff;
  padding: 0 6px;
  font-size: 14px;
  line-height: 22px;
  margin: 2px 5px;
}

.playground-wrap .topBarItem:hover {
  cursor: pointer;
}

.playground-wrap .menuWrap:hover {
  cursor: pointer;
}
